<!--
@name:
@description:
@author: mr.ck
@title: talk is cheap, show me the code!!!
@time: 2021-03-29 14:14:28
        --流水页面--
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Title</title>
    <link rel="stylesheet" href="./bootstrap-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/mui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,body,.container-xl {
            width: 100%;
            height: 100%;
        }

        .header {
            height: 7%;
        }

        .mui-content {
            height: 87%;
        }

        .mui-slider-group {
            height: 150px;
        }

        .mui-slider-group img {
            width: 100%;
            height: 100%;
        }

        .center-b {
            height: 67%;
        }
        .bottom {
            height: 6%;
        }

        .h-r img {
            width: 16px;
            height: 16px;
            margin-right:10px ;
        }

        .h-r img:last-child {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="container-xl p-0">
        <div class="header">
            <div class="h-l float-left w-50 h-100">
                <a href="" class="mui-icon mui-icon-back mt-3 ml-2"></a>
                2021年
            </div>
            <div class="h-r float-right w-50 h-100 pt-3 text-right pr-2">
                <img src="./img/more.png" alt="">
                <img src="./img/find.png" alt="">
                <img src="./img/add.png" alt="">
            </div>
        </div>

        <div class="mui-content" id="pullrefresh">
            <div class="center-t">
                <div class="mui-slider">
                    <div class="mui-slider-group">
                        <div class="mui-slider-item">
                            <div class="t-cont position-absolute" style="z-index: 10; text-indent: 2em;top: 40px">
                                <p class="m-0" style="color: #f5f5f5">结余</p>
                                <h1 class="mb-2 mt-0" style="color: white">0.00</h1>
                                <p style="color: white">收入 0.00 | 支出 0.00</p>
                            </div>
                            <a href="#"><img src="./img/bg%20(1).jpg" /></a>
                        </div>

                        <div class="mui-slider-item">
                            <a href="#"><img src="./img/bg%20(2).jpg" /></a>
                        </div>
                    </div>
                </div>
                <div class="center-b">
                    <div class="container mt-3">
                        <div class="row">
                            <div class="alert alert-light col-12">
                                <h5 class="alert-heading"><img src="logo/day.svg" style="width: 16px;height: 16px" alt="">今天</h5>
                                <p>
                                    <span style="display: inline-block" class="col-7" >今天你还没有记账，来记一笔吧！</span>
                                    <span  class="liushui" style="color: #dc3545">0.00</span>
                                    <span  class="liushui" style="color: #28a745">0.00</span>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="alert alert-light col-12">
                                <h5 class="alert-heading"><img src="logo/day.svg" style="width: 16px;height: 16px" alt="">2021.03.29</h5>
                                <p>
                                    <span style="display: inline-block" class="col-7"  >今天你还没有记账，来记一笔吧！</span>
                                    <span  class="liushui" style="color: #dc3545">0.00</span>
                                    <span  class="liushui" style="color: #28a745">0.00</span>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="alert alert-light col-12">
                                <h5 class="alert-heading"><img src="logo/day.svg" style="width: 16px;height: 16px" alt="">2021.03.28</h5>
                                <p>
                                    <span style="display: inline-block" class="col-7"  >今天一共收了15笔钱，快来数数吧！</span>
                                    <span  class="liushui" style="color: #dc3545">0.00</span>
                                    <span  class="liushui" style="color: #28a745">999.00</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="bottom">
            <div class="btn-group col-12 p-0 h-100" role="group" aria-label="Button group with nested dropdown">
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop1" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">月</button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="#">Dropdown link</a>
                        <a class="dropdown-item" href="#">Dropdown link</a>
                    </div>
                </div>

                <div class="btn-group" role="group">
                    <button id="btnGroupDrop2" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">分类</button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="#">Dropdown link</a>
                        <a class="dropdown-item" href="#">Dropdown link</a>
                    </div>
                </div>

                <button type="button" class="btn btn-light">账户</button>
                <button type="button" class="btn btn-light">项目</button>

                <div class="btn-group" role="group">
                    <button id="btnGroupDrop3" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">更多</button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="#">1</a>
                        <a class="dropdown-item" href="#">1</a>
                    </div>
                </div>
            </div>


        </div>
    </div>

<script src="bootstrap-dist/js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-dist/js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/mui.js"></script>

<script !src="">
    mui.init({
        pullRefresh : {
            container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
            down : {
                callback :callfunction //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            }
        }
    });

    function callfunction() {
        setTimeout(function () {//定时器，提升用户体验
            //......//实现更新页面的操作，一般上就是ajax请求数据，页面动态加载元素
            mui.toast('没有数据更新！');
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //完成刷新
        }, 1500);
    }
</script>
</body>
</html>